// 导入基础包
import React, { useState } from 'react'
import { connect } from 'umi'

// 导入处理函数
import { open_file, open_sheet, upload_onChange, save_tags, save_list_to_service } from './methods'

// 导入UI组件
import { Upload, Tabs, Button, Modal } from 'antd';
import { FileExcelTwoTone } from '@ant-design/icons';
import Table from './components/table'
import Tags from './components/tags'

// 导入样式文件
import css from './addfile.less'

// 组件UI
const useAutoUI = (props) => {
    const { global: state, dispatch } = props;
    const [ui, setUi] = useState('1');

    // 上传组件参数
    const Dragger_props = {
        name: 'file',
        headers: {
            authorization: 'authorization-text',
        },
        showUploadList: false,
        maxCount: 1,
        onChange: (e) => upload_onChange(e, state, dispatch),
        beforeUpload: file => {
            // setUi('2')
            // reader_file(file, dispatch)
            open_file(file, dispatch)
        }
    };

    // tabs切换回调
    const onTabClick = e => setUi(e)

    const openSheet = e => {
        open_sheet(e, state, dispatch)
        setUi('2')
    }

    const save = e => {
        save_list_to_service(state, dispatch)
    }

    const confirm = (e) => {
        Modal.confirm({
            title: 'Confirm',
            content: 'Bla bla ...',
            okText: '确认',
            cancelText: '取消',
            onOk: () => save(e)
        });
    }

    return (
        <div className={css.basic}>
            <Tabs activeKey={ui} onTabClick={onTabClick}>
                <Tabs.TabPane tab="(1).上传档案文件" key={'1'}>
                    <div>

                        <div>
                            <Upload.Dragger {...Dragger_props}>
                                <p className="ant-upload-drag-icon">
                                    <FileExcelTwoTone />
                                </p>
                                <p className="ant-upload-text">点击选取文件或拖入文件</p>
                                <p className="ant-upload-hint">
                                    请预先处理好表格文件，请确保表头在文件的第一行，而且是单行表头，一行一条数据，并删除多余数据信息！
                        </p>
                            </Upload.Dragger>
                        </div>
                        <div className={css.sheets}>
                            <h2>{state.upload_file}</h2>
                            <Button type="text">选择要导入的工作表</Button>
                            {state.sheet_names.map((n, id) =>
                                <Button key={id} onClick={() => openSheet(n)}>{n}</Button>
                            )}
                        </div>
                    </div>
                </Tabs.TabPane>
                <Tabs.TabPane tab="(2).检查上传的文件数据" key={'2'}>
                    <Table title={`文件：${state.upload_file}  / 工作表：[${state.sheet}]`} cols={state.file_cols} data={state.file_data} width={3500} height={500} border edit />
                </Tabs.TabPane>
                <Tabs.TabPane tab="(3).关联表头标签" key={'3'}>
                    <Tags onSave={(s, g) => {
                        save_tags(s, g)
                        setUi('4')
                    }} />
                </Tabs.TabPane>
                <Tabs.TabPane tab="(4).检查转换数据" key={'4'}>
                    <Button disabled={state.format_file_data.length !== 0 ? false : true} type="primary" className={css.btn} onClick={confirm}>添加档案到数据库</Button>
                    <Table cols={state.table_cols} data={state.format_file_data} width={3500} height={500} border edit />
                </Tabs.TabPane>
            </Tabs>
        </div>

    )
}

// 导出组件UI并绑定Models
export default connect(({ global }) => ({ global }))(useAutoUI);
